
<{include file="www/header.tpl"}>
<{include file="www/header-base.tpl"}>

<nav class="base-nav">
    <ul class="nav fix">
        <li class="li"><a href="/tourist/orders" <{if $step == 'orders_activity' || $step == 'orders_track' || $step == 'order_detail'}>class="active"<{/if}> >预定记录</a></li>
        <li class="li"><a href="/tourist/info" class="info" <{if $step == 'info'}>class="active"<{/if}> >基本信息</a></li>
        <li class="li"><a href="/tourist/credit" class="credit" <{if $step == 'credit'}>class="active"<{/if}> >认证</a></li>
    </ul>
</nav>

<div class="ucenter fix">
    <div class="sidebar">
        <{if $global_user.userType == 'GUIDER'}>
        <{include file="www/guider/left_menu.tpl"}>
        <{elseif $global_user.userType == 'TOURIST'}>
        <{include file="www/tourist/left_menu.tpl"}>
        <{/if}>

    </div>
    <div class="main">
        <h2 class="title">跟<{$userInfo.userName}>对话</h2>

        <div id="chatBox">
        <div class="listbox">
            <div class="more"><img src="/resource/www/imgs/prev-icon.png"></div>
            <table id="chatList">
                <{foreach from=$chatList.list item="msg"}>
                <{include file="www/tourist/chat/message.tpl"}>
                <{/foreach}>
                <input type="hidden" name="totalmsg" value="<{$chatList.total}>">
            </table>
         </div>
            <div class="comment">
                <div class="com_form">
                    <textarea id="saytext" name="saytext" class="qingsu" placeholder="请输入文字" onkeydown="enter_send_comments();"></textarea>
                    <input type="hidden" id="uid" name="uid" value="<{$uid}>">
                    <span class="fix">
                    <input type="submit" class="sub_btn" value="发送" onclick="submit_send_comments();">
                    <em class="btn_info">Ctrl+Enter</em>
                    </span>
                    <input type="hidden" name="clicktimes" value="10">
                </div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="/resource/skin/css/jquery.mCustomScrollbar.min.css"/>
<link rel="stylesheet" href="/resource/skin/css/jquery.emoji.css"/>
<script src="/resource/skin/js/jquery.mousewheel-3.0.6.min.js"></script>
<script src="/resource/skin/js/highlight.pack.js"></script>
<script src="/resource/skin/js/jquery.mCustomScrollbar.min.js"></script>
<script src="/resource/skin/js/jquery.emoji.js"></script>
<script type="text/javascript">

function talk_img_click (item)
{
    var src = $(item).attr('src');
    talk_post_message('image', src);
}

function talk_post_message (type, msg)
{
    var uid = $("#uid").val();
    if (type == 'image')
        var param = { 'img' : msg,'uid':uid };
    else
        var param = { 'txt' : msg,'uid':uid };

    $.post('/chat/api', param, function (o) {
        if (o.status == 0)
        {
            reload_chat_content(0,10,true);
            clearInterval(bb);
            bb = setInterval(function(){reload_chat_content(0,10,false);}, 3000);
            $("input[name='clicktimes']").val(10);
        }
    }, 'json');
}

$(function(){
        $('#saytext').emoji({
           showTab:false,
           animation:'fade',
           icons: [{
           name:'group1',
           path:'/resource/skin/face/tieba/',
           maxNum:50,
           file:".png",
           placeholder:"#{alias}#",
           alias:{1: "呵呵",2: "哈哈",3: "吐舌",4: "啊",5: "酷",6: "怒",7: "开心",8: "汗",9: "泪",10: "黑线",
            	  11: "鄙视",12: "不高兴",13: "真棒",14: "钱",15: "疑问",16: "阴脸",17: "吐",18: "咦",19: "委屈",
            	  20: "花心",21: "呼~",22: "笑脸",23: "冷",24: "太开心",25: "滑稽",26: "勉强",27: "狂汗",28: "乖",29: "睡觉",
            	  30: "惊哭",31: "生气",32: "惊讶",33: "喷",34: "爱心",35: "心碎",36: "玫瑰",37: "礼物",38: "彩虹",39: "星星月亮",
            	  40: "太阳",41: "钱币",42: "灯泡",43: "茶杯",44: "蛋糕",45: "音乐",46: "haha",47: "胜利",48: "大拇指",49: "弱",50: "OK"
              }
           }]
    });
        bb = setInterval(function(){reload_chat_content(0,10,false);}, 3000);
        $(".sub_btn").mouseenter(function(){$(".btn_info").show();});
        $(".sub_btn").mouseleave(function(){$(".btn_info").hide();});
        var topY=$("#chatList").height()-$(".list").height();
        $(".listbox").scrollTop(topY);
        $(".more").mouseenter(function(){$(".listbox img").css("top","-5px")});
        $(".more").mouseleave(function(){$(".listbox img").css("top","-10px")});
        $(".more").click(function(){
            
            var num=parseInt($("input[name='clicktimes']").val());
            var msgs=parseInt($("input[name='totalmsg']").val());
            if(num>msgs||num==msgs){
                layer.msg("没有更多的消息了~");        	
            }else{
            	clearInterval(bb);
            	num+=10;
                $("input[name='clicktimes']").val(num);
                reload_chat_content(0,num,false);
                bb = setInterval(function(){reload_chat_content(0,num,false);}, 3000);
            }       
        });
});

function reload_chat_content (offset,limit,postobottom)
{
	var uid = $("#uid").val();
	var param = { 'uid' : uid, 'limit' : limit, 'offset' : offset };
    $.post('/chat/refresh',param, function (o) {
        if (o.status == 0)
        {
            var oTop=$(".listbox").scrollTop();
        	$('#chatList').html(o.html);
            if(postobottom){
            var topY=$("#chatList").height()-$(".list").height();
            $(".listbox").scrollTop(topY);
            }else{$(".listbox").scrollTop(oTop);}
        }
    }, 'json');
}

function submit_send_comments() {
    var str = $("#saytext").val();
    str=$.trim(str);
    if (!str) {
        layer.msg('请输入内容');
        return false;
    }
    if(str.length>100){
    	layer.msg('输入的内容控制在100字以内');
        return false;
    }
        $('#saytext').val('');
        talk_post_message('text', str);
}

function enter_send_comments() {

    var event = window.event || arguments.callee.caller.arguments[0];
    if (event.keyCode == 13 && event.ctrlKey) {
         submit_send_comments();
    }
}

//查看结果
function replace_em(str){
	str = str.replace(/\</g,'&lt;');
	str = str.replace(/\>/g,'&gt;');
	str = str.replace(/\n/g,'<br/>');
	str = str.replace(/\[em_([0-9]*)\]/g,'<img src="face/$1.gif" border="0" />');
	return str;
}
</script>
<style>
.listbox {overflow:auto;overflow-x:hidden;height:400px;border-bottom: 1px solid  #e5e5e5;}
.listbox .more{background: #e6e6e6;width: 100px;height: 50px;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;position: relative;left: 325px;}
.listbox .more img{ width: 33px;height: 50px;position: absolute;top: -10px;left: 35px;transform: rotate(-90deg);-ms-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-o-transform: rotate(-90deg);}
#chatList { width: 748px; height:800px;padding: 20px 40px; }
.msg { font-size: 12px; width: 668px; }

.msg .ll, .msg .rr { width: 36px; }
.msg .ll  .img { float: left; }
.msg .rr { }
.msg .mm { vertical-align: top;  }
.msg .time { position: relative; left: 50%; transform: translate(-50%, 0); text-align: center; font-size: 11px; color: #898989; line-height: 30px; }
.msg .avatar img { width: 36px; height: 36px; border-radius: 50%; }

.msg .message { display: inline-block; position: relative; margin-left: 20px; background: #0bce93; color: #191919; line-height: 22px; border-radius: 5px; margin-bottom: 20px; max-width: 550px; padding: 4px 10px; word-wrap: break-word; margin-top: 3px; }
.msg .message img { width: 22px;height: 22px;display: inline;}
.msg .messageleft { display: inline-block; max-width: 550px;  position: relative; float: right; margin-right: 20px; margin-top: 3px; line-height: 22px; border:1px solid #e6e6e6; border-radius: 5px; margin-bottom: 20px; padding: 4px 10px; color: #000;  background: #fff; margin-top: 2px;  word-wrap: break-word; }
.msg .messageleft img { width: 22px;height: 22px;display: inline;}
.message:after { position: absolute;top: 9px;left: -12px;content: '';border: 6px solid transparent;border-right: 6px solid #0bce93; }
.messageleft:after { position: absolute;top: 9px;right: -12px;content: '';border: 6px solid transparent;border-left: 6px solid #e6e6e6; }

.qingsu { width: 748px; height: 110px; line-height: 24px; padding: 10px 0 0 10px; }
.sub_btn { width: 70px; height: 30px; text-align: center;line-height: 30px; color: #fff; font-size: 14px; font-weight: bold; background: #ef6b6d;float:right; margin: 0 10px 10px 0; }
.btn_info {display:none;line-height: 30px;font-size: 15px;font-weight: bold;color: #b4b4b4; margin-right: 10px;float: right;}

</style>

<div style="width: 50%;float: right">

</div>

<script>
    $('.message').addClass('active');
</script>

<{include file="www/footer.tpl"}>
